d3.select('#example-data').on('click', function (event) {
    event.preventDefault(); // 避免改掉 location，发生跳转
    d3.select('#qSeq').property('value', 'Py11\tGACAAACCGCACGTCTATTATGA\tCGGAGATCTTCGAGTCACCAT\n' + 'Py63\tACATCCAATGAGCCCGGA\tGGTAGTGTTGTGCTTCATCCAC');
});

show_chrs();

d3.select('#species').on('change', show_chrs);

d3.selectAll('.spec-required').on('click', function() {
    d3.select(this).property('checked', true);
});

// 完全改用 d3 来写吧
function on_click_selector() {
    d3.selectAll('.selector').on('click', function (event) {
        var subG = d3.select(this);
        var v = subG.property('value');
        
        if (subG.property('checked')) {
            d3.selectAll('.' + v).property('checked', true);
        } else {
            d3.selectAll('.' + v).property('checked', false);
        }
    });
}

function show_chrs() {
    d3.select('#chromosomes').html('');
    var species = d3.select('#species').property('value');
    if (!species) {
        return d3.select('#chromosomes')
            .html('<b style="color: red">请选择数据库。</b>');
    }

    d3.json('/pp_locator/chromosome?species=' + species)
        .then(function (chromosome) {
            var subGs = Object.keys(chromosome), txt = '';
            // 返回了 {}
            if (subGs.length == 0) {
                return d3.select('#chromosomes')
                    .html('无效的数据库！');
            }
            subGs.forEach(subG => {
                txt += '<dt>' +
                    '<input class="selector" id="subG-' + subG + '" title="select/unselect ' + subG +
                    ' genome" type="checkbox" value="subG_' + subG + '">' + '<label for="subG-' +
                    subG + '"> ' + subG + ' </label></dt>';
                txt += '<dd>';
                Object.keys(chromosome[subG])
                    .sort((a, b) => ((+a) - (+b))).forEach((hgrp, idx) => {
                        txt += '<input class="subG_' + subG +
                            '" id="chr' + hgrp + subG + '" name="chrs[]" type="checkbox" value="' + hgrp + subG + '">';
                        txt += '<label for="chr' + hgrp + subG + '"> ' + hgrp + ' </label>';
                        if ((idx + 1) % 10 === 0) txt += '<br>';
                    });
                txt += '</dd>';
            });
            d3.select('#chromosomes').html(txt);
            on_click_selector();
        });
}

function checkForm(form, value) {
    var submitForm = true;

    // query sequence
    if (form.querySeq.value.match(/^\s*$/)) {
        alert("请输入您的查询数据。");
        submitForm = false;
        return;
    }
    if (!form.querySeq.value.match(/^[\x00-\x7F]+$/)) {
        alert("输入数据：您输入了奇怪的字符！此处仅可输入 ASCII 字符。");
        submitForm = false;
        return;
    }

    // chromosomes OK?
    var chrs = 0;
    var tmp_el = document.getElementsByTagName('input');
    for (var i = 0; i < tmp_el.length; i++) {
        if ((tmp_el[i].type == "checkbox") && (tmp_el[i].name == 'chrs[]') && (tmp_el[i].checked == true)) {
            chrs += 1;
        }
    }

    if (chrs == 0) {
        var msg1 = "未选择染色体！";
        alert(msg1);
        submitForm = false;
        return;
    }

    // submit
    if (submitForm == true) {
        form.submit();
    }
}